﻿<!DOCTYPE html>
<html  style="height: 100%;">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>医疗机构</title>
	<link rel="stylesheet" type="text/css" href="/css/iview.css" />
	<link rel="stylesheet" type="text/css" href="/css/index.css"/>
	<script src="/js/jquery-3.5.1.min.js" type="text/javascript"></script>
	<script src="/js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
	<script src="/js/echarts.min.js" type="text/javascript"></script>
</head>

<body style="height: 100%;">
<div id="index_box">
	<!--头部-->
	<div class="index_header">
		<div class="h_left">
			<div class="showTime">
				<p class="time" style="font-size:12px;">2021年3月<span></span></p>
			</div>
		</div>
		<div class="h_center">
			山东省儿童青少年近视防控大数据平台
		</div>
		<div class="h_right">
			<div class="pagevalue_sel"><span th:text="${oneData.name}"></span></div>
		</div>
	</div>
	<!--中间内容区-->
	<div class="index_contont">
		<!--内容左侧-->
		<div class="ct_one">
			<div class="totalbkind">
				<p class="totalbkind_h5">历次检测人数</p>
				<div id="main1" style="width:100%;height:100%;"></div>
				<script type="text/javascript" th:inline="javascript">
					var numList = [[${twoData.numList}]]
					var checkTimeList = [[${twoData.checkTimeList}]]
					var myChart1 = echarts.init(document.getElementById('main1'));
					option = {
						title: {
							text: '',
							textStyle: {
								fontWeight: 'normal',
								color: '#fff',//标题颜色
							},
							x:"left"
						},
						tooltip: {
							trigger: 'axis'
						},

						grid: {
							left: '3%',
							right: '8%',
							bottom: '18%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: checkTimeList,
							axisLabel: {
								//formatter: '{value} ml',//单位
								textStyle: {fontSize : 12 ,color:'#9dcfe2'},
							},
							//x轴颜色
							axisLine: {
								lineStyle: {color: '#153b57',}
							},
						},
						yAxis: {
							type: 'value',
							name: '人数',
							nameTextStyle:{//y轴上方单位的颜色
								color:'#9dcfe2'
							},
							//设置网格线颜色
							splitLine: {
								show: true,
								lineStyle:{
									color: ['#0e2342'],
									width: 1,
									type: 'solid'
								},
							},
							axisLabel: {
								formatter: '{value}',//单位
								textStyle: {fontSize : 12,color:'#9dcfe2'},
							},
							//y轴颜色
							axisLine: {
								lineStyle: {color: '#153b57',}
							},
						},
						series: [
							{
								name:'人数',
								type:'line',
								smooth: true,
								areaStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
											{ offset: 0, color: "#1e66b8" },
											{ offset: 0.5, color: "#157cb3" },
											{ offset: 1, color: "#0790b8" }
										])
									}
								}, //填充区域样式
								data:numList
							}
						]
					};

					myChart1.setOption(option);
				</script>
			</div>
			<div class="totalbkind" style="margin-top: 2%;">
				<p class="totalbkind_h5">三级监测</p>
				<div id="main2" style="width:100%;height:100%;"></div>
				<script type="text/javascript" th:inline="javascript">
					var checkTimeList = [[${twoData.checkTimeList}]]
					var everyCheckLcList = [[${twoData.everyCheckLcList}]]
					var everyCheckZxList = [[${twoData.everyCheckZxList}]]
					var everyCheckJxList = [[${twoData.everyCheckJxList}]]
					var myChart2 = echarts.init(document.getElementById('main2'));

					option = {
						title: {
							text: ''
						},
						tooltip: {
							trigger: 'axis',
							formatter: " {b} <br/>{a2}: {c2}%<br/>{a1}: {c1}%<br/>{a}: {c}%"
						},
						legend: {
							textStyle: {
								color: '#fff',
								fontSize: 12,
							},
							right:'50%',
							data: ['临床前期', '假性近视', '真性近视']
						},
						grid:{
							x:50,
							y:50,
							x2:40,
							y2:70,
						},
						toolbox: {
							feature: {
								//saveAsImage: {}
							},
						},

						xAxis: {
							type: 'category',
							boundaryGap: false,
							axisLabel: {
								/*inside: true,*/
								interval:0,
								textStyle: {
									color: '#fff',
									fontSize: 12

								}
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								show: true,
								symbol:['none', 'arrow'],
								symbolOffset: 12,
								lineStyle:{
									color: '#fff',
								}
							},
							data: checkTimeList
						},
						yAxis: {
							type: 'value',
							//name: '单位：人',
							axisLine: {
								show: true,
								symbol: ['none', 'arrow'],
								symbolOffset: 12,
								lineStyle:{
									color: '#fff',
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								textStyle: {
									color: '#fff',
									fontSize: 12
								}
							},
							axisLabel: {
								formatter: '{value} %'
							}
						},
						series: [
							{
								name: '临床前期',
								type: 'line',
								//stack: '总量',
								data: everyCheckLcList,
								itemStyle: {
									normal: {
										color: "#0efdff",//折线点的颜色
										lineStyle: {
											color: "#0efdff",//折线的颜色
											width:2,
										}
									},
								}
							},
							{
								name: '假性近视',
								type: 'line',
								//stack: '总量',
								data: everyCheckJxList,
								itemStyle: {
									normal: {
										color: "#ff2400",//折线点的颜色
										lineStyle: {
											color: "#ff2400",//折线的颜色
											width:2,
										}
									},
								}
							},
							{
								name: '真性近视',
								type: 'line',
								//stack: '总量',
								data: everyCheckZxList,
								itemStyle: {
									normal: {
										color: "#ffd500",//折线点的颜色
										lineStyle: {
											color: "#ffd500",//折线的颜色
											width:2,
										}
									},
								}
							},
						]
					};

					myChart2.setOption(option);
				</script>
			</div>
			<div class="totalbkind" style="margin-top: 2%;height: 33.5%;">
				<p class="totalbkind_h5">学校</p>
				<div class="txtMarquee-top">
					<div class="hd">
						<ul>
							<li>序号</li>
							<li>学校名称</li>
							<li>人数</li>
						</ul>
					</div>
					<div class="bd">
						<ul id="schoolList" class="infoList">
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--内容中间-->
		<div class="ct_two">
			<div class="allDate">
				<ul>
					<li>
						<dl>
							<dt>受检者总数</dt>
							<dd><span th:text="${oneData.checkNum}"></span></dd>
							<em></em>
						</dl>
					</li>
					<li>
						<dl>
							<dt>近视率</dt>
							<dd><span th:text="${oneData.JiGouJsLv}"></span>%</dd>
							<em></em>
						</dl>
					</li>
					<li>
						<dl>
							<dt>男女比例</dt>
							<dd><span th:text="${oneData.man}"></span></dd>
							<em></em>
						</dl>
					</li>
					<li>
						<dl>
							<dt>临床前期患病率</dt>
							<dd><span th:text="${oneData.JiGouLcLv}"></span>%</dd>
							<em></em>
						</dl>
					</li>
					<li>
						<dl>
							<dt>假性近视患病率</dt>
							<dd><span th:text="${oneData.JiGouJxLv}"></span>%</dd>
							<em></em>
						</dl>
					</li>
					<li>
						<dl>
							<dt>真性近视患病率</dt>
							<dd><span th:text="${oneData.JiGouJsLv}"></span>%</dd>
							<em></em>
						</dl>
					</li>
				</ul>
			</div>
			<div class="totalbkind" style="margin-top: 3%;height: 33.5%;width: 48%;float: left;margin-left: 1%;">
				<p class="totalbkind_h5">个人</p>
				<div class="txtMarquee-top">
					<div class="hd">
						<ul>
							<li>序号</li>
							<li>姓名</li>
							<li>结果</li>
						</ul>
					</div>
					<div class="bd">
						<ul id="gerenList" class="infoList">

						</ul>
					</div>
				</div>
			</div>
			<div class="totalbkind" style="margin-top: 3%;height: 33.5%;width: 48%;float: left;margin-left: 3%;">
				<p class="totalbkind_h5">眼轴长度</p>
				<div class="txtMarquee-top">
					<div class="hd">
						<ul>
							<li>姓名</li>
							<li>左眼</li>
							<li>右眼</li>
						</ul>
					</div>
					<div class="bd">
						<ul id="eyeaxisList" class="infoList">
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--内容右侧-->
		<div class="ct_three">
			<div class="totalbkind">
				<p class="totalbkind_h5">近视患病率</p>
				<div id="main3" style="width:100%;height:100%;"></div>
				<script type="text/javascript" th:inline="javascript">
					var JsData = [[${threeData}]];

					var myChart3 = echarts.init(document.getElementById('main3'));
					option = {
						title : {
							text: ' ',
						},
						tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						color : [ '#096ee6', '#da902a' ,'#6495ED' ,'#7CFC00'],
						series : [
							{
								name: '占比',
								type: 'pie',
								radius : '55%',
								center: ['50%', '45%'],
								data:[
									{value:JsData.normal, name:'正常'},
									{value:JsData.mildNumber, name:'低度近视'},
									{value:JsData.moderateNumber, name:'中度近视'},
									{value:JsData.highlyNumber, name:'高度近视'},
								],
								label: {
									textStyle: {
										"fontSize": 14,//饼图上文字
										color:'#fff'
									}
								},
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

					myChart3.setOption(option);
				</script>
			</div>
			<div class="totalbkind"  style="margin-top: 2%;">
				<p class="totalbkind_h5">年龄人数</p>
				<div id="main4" style="width:100%;height:100%;"></div>
				<script type="text/javascript" th:inline="javascript">
					var ageMap = [[${fourData}]];
					var myChart4 = echarts.init(document.getElementById('main4'));
					option = {
						title : {
							text: ' ',
						},
						tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						color : [ '#5bb970', '#3fa4e6','#BDB76B','#FFD700','#00BFFF', ],
						series : [
							{
								name: '占比',
								type: 'pie',
								radius : '55%',
								center: ['50%', '45%'],
								data:[
									{value:ageMap.lt6Num, name:'<6岁'},
									{value:ageMap.to12Num, name:'6-12岁'},
									{value:ageMap.to15Num, name:'13-15岁'},
									{value:ageMap.to18Num, name:'16-18岁'},
									{value:ageMap.gt18Num, name:'>18岁'},
								],
								label: {
									textStyle: {
										"fontSize": 14,//饼图上文字
										color:'#fff'
									}
								},
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

					myChart4.setOption(option);
				</script>
			</div>
			<div class="totalbkind"  style="margin-top: 2%;height: 33.5%;">
				<p class="totalbkind_h5">角膜曲率</p>
				<div class="txtMarquee-top">
					<div class="hd">
						<ul>
							<li>姓名</li>
							<li>左眼</li>
							<li>右眼</li>
						</ul>
					</div>
					<div class="bd">
						<ul id="cornealList" class="infoList">
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!--一级预警：近视发生预警弹框-->
<div class="YJpop popOne">
	<div class="blackPop"></div>
	<table class="tableOne" border="1" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th>重点监测项目</th>
			<th>重点检测内容</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>日常生活视力</td>
			<td>裸眼远视力和裸眼近视力</td>
		</tr>
		<tr>
			<td>生理性远视储备值</td>
			<td>散瞳前屈光度和散瞳后屈光度</td>
		</tr>
		<tr>
			<td>轴率比</td>
			<td>眼轴长度和角膜曲率</td>
		</tr>
		<tr>
			<td>眼压</td>
			<td>眼压</td>
		</tr>
		<tr>
			<td>持续近距离用眼时间</td>
			<td>用眼行为习惯监测</td>
		</tr>
		<tr>
			<td>户外活动时间</td>
			<td>用眼行为习惯监测</td>
		</tr>
		<tr>
			<td>看电子屏时间</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>阅读姿态</td>
			<td>&nbsp;</td>
		</tr>
		</tbody>
	</table>
</div>

<!--二级预警：假性近视发展为真性近视预警弹框-->
<div class="YJpop popTwo">
	<div class="blackPop"></div>
	<table class="tableTwo" border="1" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th>重点监测项目</th>
			<th>重点检测内容</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>日常生活视力</td>
			<td>裸眼远视力和裸眼近视力</td>
		</tr>
		<tr>
			<td>生理性远视储备值</td>
			<td>散瞳前屈光度和散瞳后屈光度</td>
		</tr>
		<tr>
			<td>眼压</td>
			<td>眼压</td>
		</tr>
		<tr>
			<td>眼轴长度年增长量</td>
			<td>眼轴长度</td>
		</tr>
		<tr>
			<td>隐斜量</td>
			<td>近距隐斜量和远距隐斜量</td>
		</tr>
		<tr>
			<td>调节灵敏度</td>
			<td>近距单眼和双眼调节灵敏度</td>
		</tr>
		<tr>
			<td>调节幅度</td>
			<td>单眼和双眼调节幅度</td>
		</tr>
		<tr>
			<td>持续近距离用眼时间</td>
			<td>用眼行为习惯监测</td>
		</tr>
		<tr>
			<td>户外活动时间</td>
			<td>用眼行为习惯监测</td>
		</tr>
		<tr>
			<td>看电子屏时间</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>阅读姿态</td>
			<td>&nbsp;</td>
		</tr>
		</tbody>
	</table>
</div>

<!--三级预警：低度近视发展为中高度近视预警弹框-->
<div class="YJpop popThree">
	<div class="blackPop"></div>
	<table class="tableThree" border="1" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th>重点监测项目</th>
			<th>重点检测内容</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>日常生活视力</td>
			<td>戴原镜远视力和戴原镜近视力</td>
		</tr>
		<tr>
			<td>屈光度年增长量</td>
			<td>综合验光屈光度或电脑验光</td>
		</tr>
		<tr>
			<td>眼轴长度年增长量</td>
			<td>眼轴长度</td>
		</tr>
		<tr>
			<td>眼压</td>
			<td>眼压</td>
		</tr>
		<tr>
			<td>隐斜量</td>
			<td>近距隐斜量和远距隐斜量</td>
		</tr>
		<tr>
			<td>调节灵敏度</td>
			<td>近距单眼和双眼调节灵敏度</td>
		</tr>
		<tr>
			<td>调节幅度</td>
			<td>单眼和双眼调节幅度</td>
		</tr>
		<tr>
			<td>持续近距离用眼时间</td>
			<td>用眼行为习惯监测</td>
		</tr>
		<tr>
			<td>户外活动时间</td>
			<td>用眼行为习惯监测</td>
		</tr>
		<tr>
			<td>看电子屏时间</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>阅读姿态</td>
			<td>&nbsp;</td>
		</tr>
		</tbody>
	</table>
</div>


</body>

</html>
<script type="text/javascript" th:inline="javascript" >
	(function (fn) {
		fn();
		setInterval(fn, 1000);
	})(function () {
		var dt = new Date();
		document.querySelector(".showTime span").innerHTML =
				dt.getDate() + "日<br/>" +
				dt.getHours() + "时" +
				dt.getMinutes() + "分" +
				dt.getSeconds() + "秒";
	});
	var SchoolList = [[${JGSchoolList}]];
	if (SchoolList.length>0){
		var schoolhtml='';
		for (let i = 0; i < SchoolList.length; i++) {
			schoolhtml+='<li><span class="num">'+(i+1)+'</span><span class="name">'+SchoolList[i].school+'</span><span class="shuL">'+SchoolList[i].num+'</span></li>'
			$("#schoolList").html(schoolhtml);
		}
	}

	var gerenList = [[${gerenList}]];
	if (gerenList.length>0){
		var gerenhtml='';
		for (let i = 0; i < gerenList.length; i++) {
			if (gerenList[i].eyeCondition=='真性近视'){
				gerenhtml+='<li class="No3"><span class="num">'+(i+1)+'</span><span class="name">'+gerenList[i].name+'</span><span class="shuL">'+gerenList[i].eyeCondition+'</span></li>'
			}
			if (gerenList[i].eyeCondition=='临床前期'){
				gerenhtml+='<li class="No1"><span class="num">'+(i+1)+'</span><span class="name">'+gerenList[i].name+'</span><span class="shuL">'+gerenList[i].eyeCondition+'</span></li>'
			}
			if (gerenList[i].eyeCondition=='假性近视'){
				gerenhtml+='<li class="No2"><span class="num">'+(i+1)+'</span><span class="name">'+gerenList[i].name+'</span><span class="shuL">'+gerenList[i].eyeCondition+'</span></li>'
			}
			if (gerenList[i].eyeCondition=='正常'){
				gerenhtml+='<li><span class="num">'+(i+1)+'</span><span class="name">'+gerenList[i].name+'</span><span class="shuL">'+gerenList[i].eyeCondition+'</span></li>'
			}
		}
		$("#gerenList").html(gerenhtml);
	}

	var eyeaxisList = [[${eyeaxisList}]];
	if (eyeaxisList.length>0){
		var eyeaxishtml = '';
		for (let i = 0; i < eyeaxisList.length; i++) {
			eyeaxishtml+='<li style="height: 38px"><span class="num">'+eyeaxisList[i].name+'</span><span class="name">'+eyeaxisList[i].first_check_os+'</span><span class="shuL">'+eyeaxisList[i].first_check_od+'</span></li>\n';
		}
		$("#eyeaxisList").html(eyeaxishtml);
	}

	var cornealList = [[${cornealList}]];
	if (cornealList.length>0){
		var cornealhtml='';
		for (let i = 0; i < cornealList.length; i++) {
			cornealhtml+='<li style="height: 38px"><span class="num">'+cornealList[i].name+'</span><span class="name">'+cornealList[i].mmL+'</span><span class="shuL">'+cornealList[i].mmR+'</span></li>';
		}
		$("#cornealList").html(cornealhtml);
	}

	//翻滚
	jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:4,interTime:50});

	//弹框-一级预警
	$(".infoList .No1").click(function(){
		$(".popOne .blackPop").show();
		$(".popOne .tableOne").show();
	});
	$(".popOne .blackPop").click(function(){
		$(".popOne .blackPop").hide();
		$(".popOne .tableOne").hide();
	});

	//弹框-二级预警
	$(".infoList .No2").click(function(){
		$(".popTwo .blackPop").show();
		$(".popTwo .tableTwo").show();
	});
	$(".popTwo .blackPop").click(function(){
		$(".popTwo .blackPop").hide();
		$(".popTwo .tableTwo").hide();
	});

	//弹框-三级预警
	$(".infoList .No3").click(function(){
		$(".popThree .blackPop").show();
		$(".popThree .tableThree").show();
	});
	$(".popThree .blackPop").click(function(){
		$(".popThree .blackPop").hide();
		$(".popThree .tableThree").hide();
	});


</script>
